<template>
  <div class="categories">
    <div class="cate-box" v-for="(cate, index) in categories" :key="index">
      <div class="cate-img"><img :src="cate.subPictureUrl" alt="" /></div>
      <div class="cate-title">{{ cate.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import useHomeStore from "@/stores/modeules/home";

// 分类数据 -- 数据渲染
const homeStore = useHomeStore();
const { categories } = storeToRefs(homeStore);
</script>

<style scoped lang="scss">
.categories {
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 15px auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .cate-box {
    width: 73px;
    flex-shrink: 0; // 不希望压缩
    text-align: center;
    .cate-img {
      img {
        width: 40px;
        height: 40px;
      }
    }
    .cate-title {
      margin-top: 10px;
      font-size: 13px;
    }
  }
}
</style>
